<template>
  <div class="grid-box">
    <p>sub-element align left</p>
    <CloudRow type="flex" justify="start">
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
    </CloudRow>

    <p>sub-element align center</p>
    <CloudRow type="flex" justify="center">
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
    </CloudRow>

    <p>sub-element align right</p>
    <CloudRow type="flex" justify="end">
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
    </CloudRow>

    <p>sub-element monospaced arrangement</p>
    <CloudRow type="flex" justify="space-between">
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
    </CloudRow>

    <p>sub-element align full</p>
    <CloudRow type="flex" justify="space-around">
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
      <CloudCol :span="4"> col-4 </CloudCol>
    </CloudRow>
  </div>
</template>
<script>
export default {
  title: '4.Flex 布局',
  subTitle: '使用 row-flex 定义 flex 布局，其子元素根据不同的值 start,center,end,space-between,space-around，分别定义其在父节点里面的排版方式。',
  data() {
    return {}
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.grid-box {
  text-align: center;
}
.ant-col {
  text-align: center;
  color: #ffffff;
  margin-top: 8px;
  margin-bottom: 8px;
}
.ant-row-flex {
  background: #f5f5f5;
}
.ant-row-flex > div:not(.gutter-row):nth-child(odd),
.ant-row > div:not(.gutter-row):nth-child(odd),
.ant-row-flex > div:not(.gutter-row):nth-child(odd),
.ant-row > div:not(.gutter-row):nth-child(odd) {
  background: rgba(0, 160, 233, 0.7);
}
.ant-row-flex > div:not(.gutter-row),
.ant-row > div:not(.gutter-row),
.ant-row-flex > div:not(.gutter-row),
.ant-row > div:not(.gutter-row) {
  background: #00a0e9;
  padding: 16px 0;
}
</style>